<template>
  <div style=" margin: 10% 35%; width:100%; text-align: center; ">
    <el-form :model="form" label-width="auto" style="max-width: 400px">
      <h2>欢迎注册</h2>
      <el-form-item
        label="用户名"
        prop="username"
      >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>

      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          v-model="form.password"
          type="password"
          show-password
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item
        label="角色"
        prop="uType"
      >
        <el-select disabled  v-model="form.uType" placeholder="选择角色">
          <el-option label="1-管理员" value="1" />
          <el-option label="2-普通员工" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="电话号码">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.remarks" autocomplete="off" />
      </el-form-item>
      <div class="dialog-footer">
      <el-button type="primary" @click="saveUser"> 提交 </el-button>
      <el-button @click="createUserBtn()">清空</el-button>
    </div>
    </el-form>

 
  </div>
</template>


<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import * as userApi from "@/api/userApi";
import { storeToRefs } from 'pinia'
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
import { useRouter } from "vue-router";
const router = useRouter();


const tableData = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const dialogFormVisible = ref(false);

const dialogTitle = ref();

const form = reactive({
  id: null,
  username: "",
  password: "",
  uType: "2",
  phone: "",
  remarks: "",
  status:0
});

const queryUser = reactive({
  username: "",
  uType: "",
  phone: "",
  remarks: "",
  createTime: [],
  pageSize: pageSize.value,
  pageCurrent: currentPage.value,
});

function createUserBtn(show, title) {
 
  dialogFormVisible.value = show;
  form.username = null;
  form.password = null;
  form.phone = null;
  form.uType = "2";
  form.remarks = null;
  form.id = null;
  dialogTitle.value = title;
}



function saveUser() {
    userApi.create(form).then((response) => {
      if (response.data.code == 200) {
        ElMessage("注册成功，等待管理员审核");
        dialogFormVisible.value = false;
      }
    });
}


function handleSizeChange() {}

onMounted(() => {
 
});

// 生命周期钩子
onMounted(() => {});
</script>

<style>
</style>
